▍程式碼

<!-- history_analysis.html -->

<div class="container my-5">
    <style>
        .history-stat-item {
            margin-bottom: 10px;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
    </style>

    <h1 class="text-center mb-4 text-primary">題庫全域錯誤分析</h1>

    <!-- 返回測驗按鈕 -->
    <div class="view-control text-center mb-4">
        <a href="/quiz" class="btn btn-outline-primary">← 返回測驗頁面</a>
    </div>

    <!-- 分析內容 -->
    <div id="history-content" class="d-none">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-warning text-dark">
                <h4 class="mb-0">易錯題</h4>
            </div>
            <div class="card-body" id="frequent-mistakes">
            </div>
        </div>

        <!-- 照來源書籍分類 -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-info text-dark">
                <h4 class="mb-0">易錯類型</h4>
            </div>
            <div class="card-body" id="frequent-types">
            </div>
        </div>
    </div>
</div>

<script type="module">
    // 載入錯題資訊
    const globalKnowledgeBase = {{ knowledge_base | tojson }};

    async function loadHistory() {
        const frequentMistakesDiv = document.getElementById('frequent-mistakes');
        const frequentTypesDiv = document.getElementById('frequent-types');
        const loadingSpinner = document.getElementById('history-loading-spinner');
        const historyContent = document.getElementById('history-content');

        if (!globalKnowledgeBase || globalKnowledgeBase.length === 0) {
            loadingSpinner.classList.add('d-none');
            historyContent.classList.remove('d-none');
            frequentMistakesDiv.innerHTML = '<p class="text-danger">無法載入題庫數據或題庫為空。</p>';
            frequentTypesDiv.innerHTML = '<p class="text-danger">無法載入題庫數據或題庫為空。</p>';
            return;
        }

        // 預設顯示
        frequentMistakesDiv.innerHTML = '<p class="text-primary">正在從題庫數據中計算...</p>';
        frequentTypesDiv.innerHTML = '<p class="text-primary">正在從題庫數據中計算...</p>';

        // 處理易錯題，只取前五
        const sortedMistakes = globalKnowledgeBase
            .filter(q => q.error_count > 0) // 只分析有錯誤次數的題目
            .sort((a, b) => b.error_count - a.error_count) // 根據 JSON 中的 error_count 降序排列
            .slice(0, 5);

        if (sortedMistakes.length === 0) {
            frequentMistakesDiv.innerHTML = '<p class="text-success">目前尚無錯題。</p>';
        } else {
            frequentMistakesDiv.innerHTML = sortedMistakes.map((m, index) => `
                <div class="history-stat-item">
                    <p class="mb-1 fw-bold">第 ${index + 1} 名：${m.題目}</p>
                    <p class="mb-0 text-danger">全域錯誤次數：${m.error_count}</p>
                    <p class="mb-0 text-muted">來源：${m.來源書籍}</p>
                </div>
            `).join('');
        }

        // 處理易錯類型，照來源書籍統計
        const typeCounts = {};

        globalKnowledgeBase.forEach(question => {
            const typeKey = question['來源書籍'] || '未分類';
            const errors = question.error_count || 0; 
            typeCounts[typeKey] = (typeCounts[typeKey] || 0) + errors;
        });

        const sortedTypes = Object.entries(typeCounts)
            .filter(([, count]) => count > 0) // 只顯示有錯誤的類型
            .sort(([, a], [, b]) => b - a)
            .slice(0, 5); 

        if (sortedTypes.length === 0) {
            frequentTypesDiv.innerHTML = '<p class="text-success">目前所有分類錯誤總次數均為 0。</p>';
        } else {
            frequentTypesDiv.innerHTML = sortedTypes.map(([type, count], index) => `
                <div class="history-stat-item">
                    <p class="mb-1 fw-bold">第 ${index + 1} 名來源書籍：${type}</p>
                    <p class="mb-0 text-danger">累積錯誤總次數：${count}</p>
                </div>
            `).join('');
        }
    }

    window.onload = loadHistory;
</script>

# views.py

@app.route('/history_analysis')
def history_analysis():

    return render_template(
        'history_analysis.html',
        title='錯題分析',
        year=datetime.now().year,
        results=None,
        knowledge_base=KNOWLEDGE_BASE
    )